import React from "react";
import { Button } from "antd-mobile";
import { useDispatch } from "react-redux";
import { editDate } from "../../store/CitySlice";
import dayjs from "dayjs";
import styles from "./index.module.css";

const Index = (props) => {
  const dispatch = useDispatch();
  // 接收父组件传递的参数
  const { date } = props;
  //计算时间差的状态
  const timeDiff = dayjs(date).diff(dayjs(), "day", true);

  // 修改日期的函数
  const handelChangeDate = (num) => {
    const newDate = dayjs(date).add(num, "day").format("YYYY-MM-DD");
    // 调用dispatch修改日期
    dispatch(editDate({ date: newDate }));
  };
  return (
    <div className={styles.nav_box}>
      <Button
        size="mini"
        shape="rounded"
        disabled={timeDiff <= 0}
        onClick={() => handelChangeDate(-1)}
      >
        前一天
      </Button>
      <h3>{date}</h3>
      <Button
        size="mini"
        shape="rounded"
        disabled={timeDiff >= 3}
        onClick={() => handelChangeDate(1)}
      >
        后一天
      </Button>
    </div>
  );
};

export default Index;
